<template>
	<view class="">
		<block v-if="noNetwork">
			<view class="display-flex" style="padding-top: 166px;justify-content: center;">
				<image src="/static/images/network.png" mode="aspectFit" style="width: 152px;height: 170px;"></image>
			</view>
		</block>
		<block v-else>
			<u-navbar bgColor="linear-gradient(to bottom, #C8FFF6, #fff)" :isLinear="true" :placeholder="true" :fixed="true">
				<view slot="left"  >
					<view class="display-flex">
						<view class="listtxt">
							聊天列表
						</view>
						<view class="top" style="margin-left: 15rpx;">
							<view class="dian"></view>
							<view class="txt">
								在线
							</view>
						</view>
					</view>
				</view>
				<!-- #ifndef MP-WEIXIN -->
				<view slot="right" style="position: relative;">
					<image :src="'/images/clear.png' | formatImgUrl" mode="aspectFit" style="width: 36rpx;height: 36rpx;"></image>
				</view>
				<!-- #endif -->
			</u-navbar>
			
			<view class="content">
				<view class="serbox">
					<image :src="'/images/search.png' | formatImgUrl" class="serpic" mode=""></image>
					<input type="text" class="serput" @input="input()" placeholder="搜索联系人、聊天记录" v-model="searchKey">
				</view>
				
				<!-- <view class="user-box">
					<view class="nav-tab">
						<view :class="isActive ==0 ?'tab-item-active tab-item': 'tab-item'" @click="changeTabBtn(0)">聊天记录</view>
						<view :class="isActive ==1 ?'tab-item-active tab-item1': 'tab-item1'" @click="changeTabBtn(1)">好友列表
						</view>
						<view class="out-login" @click="outLoginBtn()"> 注 销</view>
						<view class="clear-box"></view>
					</view>
				</view> -->
				<!-- 聊天记录 会话列表 -->
				<!-- <view class="conversition-box" v-if="isActive ==0"> -->
				<view class="conversition-box" v-if="isActive ==0">
					
					<view class="list-box" v-if="(searchKey?searchList.length:conversationList_length)>0">
						<view v-if="!searchKey">
				
							<view class="item-box" v-for="(item,index) in conversationList" @click="toRoom(item)">
								<view class="item-img">
									<img  :src="item.user.pic?$options.filters.formatImgUrl(item.user.pic):'./static/images/qyh.png'">
									
									<!-- <img v-if="item.user" :src="item.user.pic?$options.filters.formatImgUrl(item.user.pic):'./static/images/qyh.png'"> -->
								<!-- 	<img v-if="item.userProfile.userID == 'administrator'" :src="item.userProfile.avatar">
									<img v-if="item.userProfile.userID == 'hudongmsg'" :src="item.userProfile.avatar">
									<img v-if="item.userProfile.userID == 'pinglunmsg'" :src="item.userProfile.avatar"> -->
								</view>
								
								<view class="item-text">
									<view class="namebox">
										<view class="item-user" >
											
												<rich-text style="color: #3d3d3d;" :nodes="!item.user.nickname?item.user.username:item.user.nickname">
																					
												</rich-text>
											
										</view>
									
										
										
										<!-- {{item.user.u_level>0?item.user.u_level_img.image:item.user.u_level_img.hide_img}} -->
									
									
									<block v-if="item.membe_id != 'administrator'&& item.membe_id != 'hudongmsg'&& item.membe_id !=  'pinglunmsg'">
										<image v-if="item.user.w_level_img"
											:src="$options.filters.formatImgUrl(item.user.is_bao>0?item.user.w_level_img.image:item.user.w_level_img.hide_img)"
											@click="$go('/pages/user/grade?uid='+item.user.membe_id)" class="jipic" mode=""
											>
										</image>
											
										<image v-if="item.user.u_level_img"
											:src="$options.filters.formatImgUrl(item.user.ucnt>0?item.user.u_level_img.image:item.user.u_level_img.hide_img)"
											@click="$go('/pages/user/grade?uid='+item.user.membe_id)" class="biepic" mode=""
											>
										</image>
									</block>
									
							
									
								<!-- 	<image
										:src="$options.filters.formatImgUrl(item.user.user_level.is_active?item.user.user_level.level.image:item.user.user_level.level.hide_img)"
										class="biepic" mode="" v-if="item.user.is_vip && item.user.user_level.level">
									</image> -->
									
										<!-- <view v-if="item.user">
											<image
												:src="$options.filters.formatImgUrl(item.user.writer_level.is_active?item.user.writer_level.level.image:item.user.writer_level.level.hide_img)"
												@click="$go('/pages/user/grade?uid='+item.user.membe_id)" class="jipic" mode=""
												v-if="item.user.is_writer && item.user.writer_level.level">
											</image>
											<image
												:src="$options.filters.formatImgUrl(item.user.user_level.is_active?item.user.user_level.level.image:item.user.user_level.level.hide_img)"
												class="biepic" mode="" v-if="item.user.is_vip && item.user.user_level.level">
											</image>
										</view> -->
									</view>
				
									<view class="item-text-info">
										<!-- <rich-text :nodes="(item.MsgBody)"></rich-text> -->
										{{item.MsgBody}}
										<!-- <rich-text :nodes="item.MsgBody">
																			
										</rich-text> -->
									</view>
								</view>
								<view class="item-msg">
									<view class="item-time"> {{item.MsgTime}}
									</view>
									<view class="shu">
										<view class="item-msg-icon" v-if="item.UnreadMsgNum">
											{{item.UnreadMsgNum>99?'99+':item.UnreadMsgNum}}
										</view>
									</view>
								</view>
							</view>
						</view>
						<view v-else>
							<view class="item-box" v-for="(item,index) in searchList" @click="toRoom(item)">
								<view class="item-img">
									<img  :src="item.user.pic?$options.filters.formatImgUrl(item.user.pic):'./static/images/qyh.png'">
								</view>
								<view class="item-text">
									<view class="namebox">
										<view class="item-user" >
											
											<rich-text :nodes="!item.user.nickname?item.user.username:item.user.nickname">
																				
											</rich-text>
										</view>
				
									<!-- 	<view v-if="item.user">
											<image
												:src="$options.filters.formatImgUrl(item.user.writer_level.is_active?item.user.writer_level.level.image:item.user.writer_level.level.hide_img)"
												@click="$go('/pages/user/grade?uid='+item.user.membe_id)" class="jipic" mode=""
												v-if="item.user.is_writer && item.user.writer_level.level">
											</image>
											<image
												:src="$options.filters.formatImgUrl(item.user.user_level.is_active?item.user.user_level.level.image:item.user.user_level.level.hide_img)"
												class="biepic" mode="" v-if="item.user.is_vip && item.user.user_level.level">
											</image>
										</view> -->
									</view>
				
									<view class="item-text-info">
										<!-- <rich-text :nodes="(item.MsgBody)"></rich-text> -->
										{{item.MsgBody}}
										<!-- <rich-text :nodes="item.MsgBody">
																			
										</rich-text> -->
									</view>
								</view>
								<view class="item-msg">
									<view class="item-time"> {{item.MsgTime}}
									</view>
									<view class="shu">
										<view class="item-msg-icon" v-if="item.UnreadMsgNum">
											{{item.UnreadMsgNum}}
										</view>
									</view>
								</view>
							</view>
						</view>
				
					</view>
					<view class="list-box" v-else>
						<view class="empytView">
							<image :src="'/images/empty.png' | formatImgUrl" mode="widthFix" />
							<view>- 暂无聊天记录 -</view>
						</view>
					</view>
				</view>
				<!-- 好友列表 -->
				<view class="conversition-box" v-if="isActive ==1">
					<view class="list-box">
						<view class="item-box" v-for="(item,index) in friendList" :key="index" @click="checkUserToRoom(item)">
							<view class="user-img">
								<image :src="item.img" alt=""></image>
							</view>
							<view class="user-name">
								{{item.user}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		<tabbar activeIdx='3'></tabbar>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		name: 'record',
		data() {
			return {
				searchKey: '',
				searchList: [],
				userList: [],
				friendList: [],
				conversationList:[],
				isActive: 0, //默认聊天记录
				userAddConversationList: [],
				conversationList_length:0,
				old_sel:[],
				noNetwork: false
			}
		},
		computed: {
			...mapState({
				isLogin: state => state.isLogin,
				isSDKReady: state => state.isSDKReady,
				imNum: state => state.imNum,
				// conversationList: state => state.conversationList,
			})
		},
		watch: {
			imNum(val){
				this.getUserInfo()
			},
			isSDKReady(val) {
				console.log(888888888)
			}
		
		},
		methods: {
			getNetworkType() {
			   	uni.getNetworkType({
			   		success:(res) =>{
						if(res.networkType == "none"){
							this.noNetwork = true
							this.$common.errorToShow('您当前处于离线状态')
						}
			   		},
					fail: (err) => {
						console.log(err,111);
					}
			   	});
			},
			input(){
				let val = this.searchKey;
				this.conversationList = uni.getStorageSync("old_sel")
	
				if (val) {
					var arr = []
					
					
					this.conversationList.forEach((item) => {
				
						if(item.user.nickname){
							if (item.user.nickname.includes(val) || item.MsgBody.includes(val)) {
								
								arr.push(item)
								// if (item.user.nickname.includes(val)){
									arr[arr.length-1].user.nickname
									= 
									item.user.nickname.replaceAll(val, "<font  style='color:#45C4B0'>" + val + "</font>")
								// }else{
									arr[arr.length-1].MsgBody
									= 
									item.MsgBody.replaceAll(val, "<font  style='color:#45C4B0'>" + val + "</font>")
								// }
								
								
							}
						}else{
							if (item.user.username.includes(val) || item.MsgBody.includes(val)) {
								arr.push(item)
								// if (item.user.username.includes(val)){
									arr[arr.length-1].user.username
									= 
									item.user.username.replaceAll(val, "<font  style='color:#45C4B0'>" + val + "</font>")
								// }else{
									arr[arr.length-1].MsgBody
									= 
									item.MsgBody.replaceAll(val, "<font  style='color:#45C4B0'>" + val + "</font>")
								// }
							}
						}
					
					})
					this.searchList = arr
				} else {
					
					this.searchList = []
				}
			},
			// conversationList(){	imNum
				
			// },
			// 获取时间
			timeFliter(timer) {
				let timeData = new Date(timer * 1000)
				let str = this.$commen.dateTimeFliter(timeData)
				return str
			},
			//注销登录
			outLoginBtn() {
				let promise = this.tim.logout();
				promise.then(res => {
					this.$store.commit('reset')
					uni.reLaunch({
						url: '../index/index'
					})
				}).catch(err => {
					console.log('退出失败')
				});
			},
			//聊天的节点加上外层的div
			nodesFliter(str) {
				
			},
			//切换tab
			changeTabBtn(_index) {
			
			},
			getFriendList() {
				// let promise = this.tim.getFriendList();
				// promise.then((res) => {
				// 	console.log('好友列表', res)
				// 	let conversationList = res.data.conversationList; // 好友列表，用该列表覆盖原有的好友列表
				// 	if (conversationList.length) {
				// 		this.$store.commit("updateFriendList", conversationList);
				// 		this.friendList = conversationList
				// 	}
				// }).catch((err) => {
				// 	console.warn('getFriendList error:', err); // 获取好友列表失败的相关信息
				// });
			},

			//获取消息列表
			getConversationList() {
				
				// 拉取会话列表
				// let promise = this.tim.getConversationList();
				// promise.then((res) => {
				// 	let conversationList = res.data.conversationList; // 会话列表，用该列表覆盖原有的会话列表
				// 	if (conversationList.length) {
				// 		//将返回的会话列表拼接上 用户的基本资料  
				// 		//说明：如果已经将用户信息 提交到tim服务端了 就不需要再次拼接
				// 		this.$store.commit("updateConversationList", conversationList);
				// 	}

				// }).catch((err) => {
				// 	console.warn('getConversationList error:', err); // 获取会话列表失败的相关信息
				// });
			},
			//根据消息列表请求聊天对象的用户信息 并完成数据拼接
			getUserInfo() {
				
				this.$api.default.request('user/get_mychat', {
		
				}).then((res) => { 
					if (res.code) {
						this.conversationList  = res.data
						this.old_sel  = res.data
						uni.setStorageSync("old_sel",res.data)
						console.log(this.conversationList.length,'length')
						this.conversationList_length = this.conversationList.length
						// obj.user = res.user
						// arr.push(JSON.parse(JSON.stringify(obj)))
					}
				})
				
				// var arr = []
				// conversationList.forEach((item, index) => {
				// 	let obj = {}
					
				// 	obj.conversation = item
				// 	if (item.toAccount && item.toAccount !== 'administrator' && item.toAccount !== 'hudongmsg' && item.toAccount !== 'pinglunmsg') {
				// 		this.$api.default.request('user/userInfo_friend', {
				// 			uid: item.toAccount
				// 		}).then((res) => { 
				// 			if (res.code) {
				// 				this.conversationList[index].user = res.user
				// 				obj.user = res.user
				// 				arr.push(JSON.parse(JSON.stringify(obj)))
				// 			}
				// 		})
				// 	}
				// })
				// this.userAddConversationList = arr
			},
			toRoom(item) {
				
				this.$store.commit('createConversationActive', item.membe_id)
				// this.$store.commit('updateConversationActive', item)
				uni.navigateTo({
					url: './room'
				})
			},
			//选择用户聊天
			checkUserToRoom(toUserInfo) {
				this.$store.commit('createConversationActive', toUserInfo.userId)
				uni.navigateTo({
					url: './room'
				})
			}

		},
		onShow() {
			
			// console.log('isSDKReady:', this.isSDKReady)
			// if (this.isSDKReady) {
			// 	// 获取会话消息列表
			let that = this;
			setTimeout(function(){
				if(db.get('auth')){
					that.getUserInfo()
				}
			},500)
		

			// 	// 获取好友列表
			// 	this.getFriendList();
			// }
			
			this.getNetworkType()
		},
		onLoad() {
			let userInfo = uni.getStorageSync('userInfo')
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 20rpx 30rpx;
	}

	.top {
		display: flex;
		align-items: center;

		.dian {
			margin-left: 8px;
			width: 12rpx;
			height: 12rpx;
			border-radius: 50%;
			background: #45C4B0;
		}
		
		.txt {
			font-size: 20rpx;
			font-weight: normal;
			letter-spacing: 0em;
			padding-left: 8rpx;
			color: #45C4B0;
		}
		
		.dian2{
			margin-left: 8px;
			width: 12rpx;
			height: 12rpx;
			border-radius: 50%;
			background: #999;
		}
		.txt2{
			font-size: 20rpx;
			font-weight: normal;
			letter-spacing: 0em;
			padding-left: 8rpx;
			color: #999;
		}
	}

	.serbox {
		display: flex;
		align-items: center;
		background: #F8F8F8;
		border-radius: 142px;
		height: 72rpx;
		padding: 0 26.66rpx;
		margin-bottom: 20rpx;

		.serpic {
			width: 32rpx;
			height: 32rpx;
			flex-shrink: 0;
		}

		.serput {
			padding: 0 16rpx;
			width: 500rpx;
			font-size: 28rpx;
			color: #333333;
		}
	}

	.list-box {
		margin: 0 auto;
	}

	.listtxt {
		font-size: 32rpx;
		font-weight: bold;
		letter-spacing: 0em;
		padding-bottom: 8rpx;
		color: #3D3D3D;
	}

	.item-box {
		width: auto;
		height: 130rpx;
		width: 100%;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #eee;
	}

	.item-img {
		width: 80rpx;
		height: 80rpx;
	}

	.item-img img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.item-text {
		flex-grow: 1;
		padding: 0 12rpx;
	}

	.item-user {
		font-size: 28rpx;
		font-weight: 500;
		letter-spacing: 0em;
		// color: #3D3D3D !important;
		ruch-text{
			color: #3d3d3d !important;
		}
	}

	.item-text-info {
		width: 470rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 12px;
		color: #999999;
	}

	.user-box {
		width: auto;
		height: 80rpx;
	}

	.nav-tab {
		padding-top: 20rpx;
		background: #fff;
		height: 80rpx;

	}

	.tab-item {
		float: left;
		height: 70rpx;
		padding: 0 20rpx;
		line-height: 70rpx;
		color: #666;
		font-size: 28rpx;
		border: 1px solid #F56C6C;
		border-top-left-radius: 25rpx;
		border-bottom-left-radius: 25rpx;
	}

	.tab-item1 {
		float: left;
		height: 70rpx;
		padding: 0 20rpx;
		line-height: 70rpx;
		color: #666;
		font-size: 28rpx;
		border: 1px solid #F56C6C;
		border-top-right-radius: 25rpx;
		border-bottom-right-radius: 25rpx;
	}

	.tab-item-active {
		color: #fff;
		background: #F56C6C;
	}

	.msg-box {
		line-height: 30rpx;
		font-size: 28rpx;
		color: #666;
	}

	.user-item-box {
		padding: 20rpx 0;
		width: auto;
		height: 70rpx;
		line-height: 70rpx;
		display: flex;
		align-items: center;
		cursor: pointer;
		border-bottom: 1px solid #eee;
	}

	.user-img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.user-img image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.user-name {
		margin-left: 12rpx;
		flex-grow: 1;
		font-size: 28rpx;
		font-weight: 500;
		letter-spacing: 0em;
		color: #3D3D3D;
	}

	.item-msg {
		flex-shrink: 0;
	}

	.shu {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.item-msg-icon {
		// width: 56rpx;
		// height: 36rpx;
		// padding: 5rpx 10rpx 5rpx 10rpx;
		min-width: 32rpx;
		height: 32rpx;
		line-height: 32rpx;
		border-radius: 50%;
		background: #FF5E45;
		color: #fff;
		// line-height: 36rpx;
		text-align: center;
		font-size: 18rpx;
	}

	.clear-box {
		clear: both;
	}

	.out-login {
		float: right;
		margin-right: 20rpx;
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 40rpx;
		border-radius: 25rpx;
		color: #fff;
		background: #F56C6C;
		font-size: 26rpx;
	}

	.item-time {
		font-size: 24rpx;
		font-weight: normal;
		text-align: right;
		letter-spacing: 0em;
		color: #999999;
		padding-bottom: 12rpx;
	}

	.namebox {
		display: flex;
		align-items: center;
		padding-bottom: 6rpx;

	}

	.jipic {
		width: 41px;
		height:19px;
		position: relative;
		left: 10rpx;
		top: 10rpx
		image {
			width: 41px !important;
			height: 19px !important;
		}
		img{
			width: 41px !important;
			height: 19px !important;
		}
	}

	.biepic {
		width: 41px;
		height:19px;
		margin-left: 4px;
	}

	rich-text {
		font-size: 24rpx !important;
		color: #999999;
	}
</style>